<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo 副本</title>
		<style>
			table {
				/* 整个表格的边框 */
				border: 1px solid black;
				/* 在浏览器中的宽度 */
				width: 80%;
				/* 内容的字居中 */
                text-align: center;
                /* 表格居中*/
                margin: auto;
            }

            table th,
            table td {
                /* 格子边框 */
                border: 1px solid #696969;
            }

            .hideDiv {
                /* //fixed相对浏览器
                //absolute相对父元素
                //relative相对自己 */
                position: fixed;
                /* //四个数字相等 使居中 */
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                /* //内边距 使div更靠中间 */
                padding-top: 10%;
                padding-left: 0%;

                /* //设置背景透明 */
                background-color: rgba(182, 193, 206, 0.5);
                /* //元素透明,不透明是1 字也透明了
                // opacity:0.2,
                //使div在最浏览器前显示 盖过其它div */
                z-index: 999;
            }

            .hideDiv table {
                background-color: #E0FFFF;
            }
        </style>
	</head>
	<body>
		<!-- 需求分析 
		2.1页面中的数据必须在data中定义
		2.2ajax请求的结果赋值给data属性 -->
		<div id="app">
			<!-- 用于更新的div 默认隐藏 点击 修改 按钮弹出 -->
			<div class="hideDiv" :style="styleHideDiv">
				<table>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
                    <tr>
                        <td v-text="userUpdate.id"></td>
                        <td><input type="text" v-model="userUpdate.name"/></td>
                        <td><input type="text" v-model="userUpdate.age"/></td>
                        <td><input type="text" v-model="userUpdate.sex"/></td>
                        <td>
                            <button @click="confirmUpdate(userUpdate)">更新</button>
                        </td>
                        <td>
                            <button @click="hideDiv()">取消</button>
                        </td>
                    </tr>
				</table>
			</div>

			<table>
				<tr>
					<td colspan="6">
						<h1>用户列表</h1>
					</td>
				</tr>

				<!-- 添加一条用户数据 不包括id-->
                <tr>
                    <td>编号:&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <!-- 在input框输入信息 -->
                    <td>姓名:<input type="text" v-model="userAdd.name" placeholder="请输入姓名..."/></td>
                    <td>年龄:<input type="text" v-model="userAdd.age" placeholder="请输入年龄..."/></td>
                    <td>性别:<input type="text" v-model="userAdd.sex" placeholder="请输入性别..."/></td>
                    <td>
                        <button @click="confirmAdd(userAdd)">添加</button>
                    </td>
                    <!-- 点 取消 清空input框 -->
                    <td>
                        <button @click="hideDiv()">清空</button>
                    </td>
                </tr>

				<!-- 用于翻页  -->
				<tr>
					<td colspan="3"></td>
					<td>设置每页条数:<input type="text" v-model.number.lazy="rows" /></td>
					<td><button @click="prePage()">上一页</button></td>
					<td><button @click="nextPage()">下一页</button></td>
				</tr>
			</table>

			<table>
				<!-- 显示表头 -->
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th colspan="2">操作</th>
				</tr>

				<!-- 显示内容 -->
                <tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<userIndex+rows">
                    <td v-text="user1.id"></td>
                    <td v-text="user1.name"></td>
                    <td v-text="user1.age"></td>
                    <td v-text="user1.sex"></td>
                    <td>
                        <button @click="showDiv(user1)">修改</button>
                    </td>
                    <td>
                        <button @click="confirmDelete(user1.id)">删除</button>
                    </td>
                </tr>
			</table>
		</div>

		<script src="../js/axios.js"></script><!-- axios用于使用ajax连接 -->
		<script src="../js/vue.js"></script><!-- 用于使用vue框架 -->
		<script>
			//axios请求前缀
			axios.defaults.baseURL = `http://127.0.0.1:8090`
			/* 绝对不要忘记 VUE 方法里面调用自身资源要用  this */
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
                    //更新和添加时用于保存用户信息
                    userAdd: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    userUpdate: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    emptyUser: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
					},
					//用于保存用户列表
					userList: [],
					//连接
					url: `/VueAxios/`,
					//每页显示数据的条数
					rows: 5,
					//当前页的第一条数据的的索引
					userIndex: 0,
					//用于更新的div的样式
					styleHideDiv: {
						//值为none是隐藏
						display: `none`
					},
				},
				methods: {
					/* 接下来是获取全部用户的方法 */
					//获取全部用户表
					async getUserList() {
						const {
							data: value
						} = await axios.get(`${this.url}user`)
						this.userList = value
					},
					/* 接下来是修改操作的方法 */
					async update(user) {
						/* 注意传参的具体操作 */
						// this.user = user
						let id = user.id
						let name = user.name
						let age = user.age
						let sex = user.sex
						await axios.put(`${this.url}user/${id}/${name}/${age}/${sex}`)
                        this.getUserList()
                    },

                    /* 接下来是删除的方法 */
                    async delete(id) {
                        await axios.delete(`${this.url}user/${id}`)
                        this.getUserList()
                    },

                    /* 新增相关方法 */
                    async add(user) { //ajax操作
                        let name = user.name
                        let age = user.age
                        let sex = user.sex
                        await axios.post(`${this.url}user/${name}/${age}/${sex}`)
                        this.getUserList()
                    },

                    confirmAdd(user) {
                        if (!this.userIsEmpty(this.userAdd)) {
                            if (this.confirmPanel('添加')) {
                                this.add(user);
                            }
                        }
                    },
                    confirmUpdate(user) {
                        if (!this.userIsEmpty(this.userUpdate)) {
                            if (this.confirmPanel('更新')) {
                                this.update(user);
                                this.hideDiv()
                            }
                        }
                    },
                    confirmDelete(id) {
                        if (this.confirmPanel('删除')) {
                            this.delete(id);
                        }
                    },
                    confirmPanel(confirmWord) {
                        return confirm(`确认${confirmWord}?`)
                    },

                    /* 隐藏和显示更新div */
                    hideDiv() {
                        this.styleHideDiv.display = `none`
                        this.shallowCopy(this.emptyUser, this.userUpdate)
                    },
                    showDiv(user1) {
                        this.shallowCopy(user1, this.userUpdate)
                        this.styleHideDiv.display = `block`
                    },


                    /* 接下来是分页的方法 */
					//上一页
					prePage() {
						if (this.userIndex >= this.rows) {
							this.userIndex -= this.rows
						} else {
							this.userIndex = 0
						}
					},
					//下一页
					nextPage() {
						if (this.userIndex + this.rows < this.userList.length) {
							this.userIndex += this.rows
						}
					},
                    /* user的非空判断 除了id外的值不能为空 */
                    userIsEmpty(user) {
                        if (user.name == '' || user.age == "" || user.sex == "") {
                            alert("请不要输入空值！！！请重新输入！！！")
                            return 1
                        } else {
                            return 0
                        }
                    },
                    //浅拷贝 拷贝的两个对象中 不能含数组或对象类型 只能含原始类型: 字符串 数值 布尔 以及函数类型
                    shallowCopy(user1, user) {
                        user.id = user1.id
                        user.name = user1.name
                        user.age = user1.age
                        user.sex = user1.sex
                    }
                },
				mounted() { //挂载时 获取列表数据
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
